import React, { useState, useEffect } from 'react';
import { history, connect } from 'umi';
import {
  Button,
  Modal,
  Form,
  Input,
  DatePicker,
  Upload,
  Checkbox,
  Radio,
  Col,
  Row,
} from 'antd';
import { getHouseDetail } from '@/api/index';
import AMapLoader from '@amap/amap-jsapi-loader';
import { PlusOutlined } from '@ant-design/icons';
import { Editor, Toolbar } from '@wangeditor/editor-for-react';
import { IDomEditor } from '@wangeditor/editor';
let map = null;
function editDetail({ dispatch }: any) {
  const { id }: any = history.location.state;
  const [isModalOpen, setIsModalOpen] = useState(false);
  const { Search } = Input;
  const [form] = Form.useForm();
  const [editInfo, setEdit] = useState<any>({});
  const [editor, setEditor] = useState<IDomEditor | null>(null); // TS 语法
  // 编辑器内容
  const [html, setHtml] = useState('<p>hello</p>');
  // 及时销毁 editor ，重要！
  useEffect(() => {
    return () => {
      if (editor == null) return;
      editor.destroy();
      setEditor(null);
    };
  }, [editor]);
  useEffect(() => {
    getHouseDetail({ id }).then((res: any) => {
      console.log(res.data);
      setEdit(res.data);
      form.setFieldsValue(res.data);
      AMapLoader.load({
        key: '7e3d22469c211e2106fda60bc98588f2', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15              // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          map = new AMap.Map('container', {
            //设置地图容器id
            zoom: 15, //初始化地图级别
            center: [res.data.lng, res.data.lat], //初始化地图中心点位置
          });
        })
        .catch((e) => {
          console.log(e);
        });
    });
  }, [isModalOpen]);
  useEffect(() => {}, []);
  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const onFinish = (values: any) => {
    dispatch({
      type: 'kefu/EDITDETAIL',
      data: { ...values, id },
    });
    history.push('/home/loupan/houseList');
  };

  return (
    <div style={{ marginTop: '80px' }}>
      <Form
        form={form}
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 600 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        autoComplete="off"
      >
        <div style={{ display: 'flex', justifyContent: 'space-around' }}>
          <Form.Item
            label="楼盘名称"
            name="title"
            style={{ width: '350px', marginLeft: '120px' }}
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="均价"
            name="title"
            style={{ width: '250px', marginLeft: '100px' }}
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input />
          </Form.Item>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-around' }}>
          <Form.Item
            label="楼盘地址"
            name="address"
            style={{ width: '250px', marginLeft: '100px' }}
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="售楼处地址"
            name="address"
            style={{ width: '300px', marginRight: '-100px' }}
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            <Input />
          </Form.Item>
        </div>
        <Form.Item
          label="开盘时间"
          style={{ width: '250px', marginLeft: '115px' }}
          name="opening_time"
          rules={[{ required: true, message: '1#,2#已开盘' }]}
        >
          <DatePicker />
        </Form.Item>
        <Form.Item
          label="售楼电话"
          name="create_time"
          style={{ width: '240px', marginLeft: '120px' }}
          rules={[{ required: true, message: 'Please input your password!' }]}
        >
          <Input />
        </Form.Item>
        <div
          style={{
            display: 'flex',
            justifyContent: 'space-around',
            width: '100%',
            marginLeft: '150px',
          }}
        >
          <Form.Item
            label="开发商"
            name="developer_name"
            style={{ width: '280px', marginLeft: '-5px' }}
          >
            <Input />
          </Form.Item>
          <Search
            style={{ width: '650px', marginLeft: '120px' }}
            value={`${editInfo.lng},${editInfo.lat}`}
            enterButton="标注位置"
            onSearch={() => {
              setIsModalOpen(true);
            }}
          ></Search>
        </div>
        <Form.Item label="优惠楼盘" name="discounts">
          <Checkbox></Checkbox>
        </Form.Item>
        <Form.Item label="装修情况" name="kefu_radio">
          <Radio.Group>
            <Radio value="apple"> 简装 </Radio>
            <Radio value="pear"> 精装 </Radio>
            <Radio value="Orange"> 豪装 </Radio>
            <Radio value="apple"> 发多少</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item label="销售状态" name="decorate">
          <Radio.Group defaultValue="apple">
            <Radio value="apple">在售</Radio>
            <Radio value="pear"> 新盘 </Radio>
            <Radio value="Orange"> 尾盘 </Radio>
            <Radio value="pear"> 售罄</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item label="棋盘类型" name="decorate">
          <Checkbox.Group
            style={{ width: '100%' }}
            onChange={(checkedValues: any) => {
              console.log('checked = ', checkedValues);
            }}
          >
            <Row>
              <Col span={3.5}>
                <Checkbox value="住宅">住宅</Checkbox>
              </Col>
              <Col span={3.5}>
                <Checkbox value="别墅">别墅</Checkbox>
              </Col>
              <Col span={3.5}>
                <Checkbox value="商铺">商铺</Checkbox>
              </Col>
              <Col span={5.5}>
                <Checkbox value="写字楼">写字楼</Checkbox>
              </Col>
              <Col span={3.5}>
                <Checkbox value="公寓">公寓</Checkbox>
              </Col>
              <Col span={3.5}>
                <Checkbox value="底商">底商</Checkbox>
              </Col>
            </Row>
          </Checkbox.Group>
        </Form.Item>
        <Form.Item
          label="推荐位"
          name="recommend"
          style={{ width: '1000px', marginLeft: '-150px' }}
        >
          <Checkbox.Group
            style={{ width: '100%' }}
            onChange={(checkedValues: any) => {
              console.log('checked = ', checkedValues);
            }}
          >
            <Row>
              <Col span={3.5}>
                <Checkbox value="小户型">小户型</Checkbox>
              </Col>
              <Col span={3.5}>
                <Checkbox value="低密居所">低密居所</Checkbox>
              </Col>
              <Col span={4.5}>
                <Checkbox value="首页刚需推荐">首页刚需推荐</Checkbox>
              </Col>
              <Col span={5.5}>
                <Checkbox value="新房列表推荐">新房列表推荐</Checkbox>
              </Col>
              <Col span={3.5}>
                <Checkbox value="干饭">干饭</Checkbox>
              </Col>
            </Row>
          </Checkbox.Group>
        </Form.Item>
        <Form.Item label="上传图片" valuePropName="fileList">
          <Upload action="/upload.do" listType="picture-card">
            <div>
              <PlusOutlined />
              <div style={{ marginTop: 8 }}>上传图片</div>
            </div>
          </Upload>
        </Form.Item>
        <Form.Item label="楼盘介绍" name="introduce">
          <div
            style={{ border: '1px solid #ccc', zIndex: 100, width: '600px' }}
          >
            <Toolbar
              editor={editor}
              mode="default"
              style={{ borderBottom: '1px solid #ccc' }}
            />
            <Editor
              value={html}
              onCreated={setEditor}
              onChange={(editor) => setHtml(editor.getHtml())}
              mode="default"
              style={{ height: '300px', overflowY: 'hidden' }}
            />
          </div>
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>
      <Modal
        title="高德地图"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        style={{ width: '800px', height: '600px' }}
      >
        <div
          id="container"
          style={{
            width: '450px',
            height: '300px',
            padding: '0px',
            margin: '0px',
          }}
        ></div>
      </Modal>
    </div>
  );
}
const mapStateToProps = ({ kefu: { listData } }: any) => {
  return {
    listData,
  };
};
export default connect(mapStateToProps)(editDetail);
